<template>
    <div>
        <div style="width: 100%;display: flex;justify-content: center;">
          <div style="width: 1200px;">
            <div>
                <div style="display: flex;align-items: center;border-bottom: 1px solid #e6e6e6;padding: 20px 0;margin-top: 10px;">
                    <div style="height: 16px;width: 8px;background-color:#256aff;border-radius: 5px;margin-right: 10px;"></div>
                    <el-breadcrumb :separator-icon="ArrowRight">
                      <!-- <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item> -->
                      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                      <el-breadcrumb-item :to="{ path: '/news' }">新闻动态</el-breadcrumb-item>
                      <el-breadcrumb-item>详情</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div style="display:flex;justify-content: center;flex-direction: column;font-size:26px;align-items: center;margin-top: 50px;">
                  <span style="text-align: center;font-weight: bold;color:#363636">{{ item.newsTitle }}</span>
                  <span style="font-size:14px;color:#c8c8c8;margin-top: 20px;">{{ item.newsTitleVice }}</span>
                </div>
                <div style="margin-top: 30px">
                  <div class="news" :style="{'backgroundImage':'url('+baseURL_dev+item.newsImageUrl+')'}"></div>
                </div>
            </div>
            <!-- <div style="margin: 50px 0;display: flex;align-items: center;">
                <div style="height: 24px;width: 7px;background-color:#256aff;border-radius: 6px;"></div>
                <div style="font-size: 26px;margin-left: 20px;">客户案例详情</div>
            </div> -->
            <div style="font-size: 14px;color: #999;line-height: 30px;margin: 50px 0;">
              <div v-html="item.newsDetails"></div>
                <!-- 客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情
                客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情客户服务详情 -->
            </div>
          </div>
        </div>
      <div style="width: 100%;">
        <!-- <div style="width: 1200px;"> -->
          <Foot />
        <!-- </div> -->
      </div>
    </div>
</template>

<script setup lang="ts">
import Foot from './foot.vue'
import { onMounted,ref } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { useRouter, useRoute } from "vue-router"
import { baseURL_dev } from '../config/baseUrl'
const router = useRouter();
const route = useRoute();
let item = ref({})
onMounted(() => {
  item.value = JSON.parse(route.query.item)
  console.log('item',item.value)
})

</script>

<style scoped>
.news{
  height: 400px;
  /* background-image: url(../../img/Swiper1.png); */
  background-size: 100% 100%
}
</style>